<template>
    <div>
        <van-tabs v-model="activeName">
            <van-tab title="用户注册" name="a">
                <van-field v-model="loginName" left-icon="contact" placeholder="请输入账号"/>
                <van-field v-model="userName" placeholder="请输入昵称" left-icon="friends-o"/>
                <van-field v-model="phonenumber" placeholder="请输入电话号" left-icon="phone-o"/>
                <van-field v-model="code" placeholder="请输入验证码" left-icon="comment-o" style="width: 50%; float: left;"/>
                <van-button :color="!disabled?'rgb(7,193,96)':'#999999'"
                            style="width: 40%; margin-left:5%; border-radius: 10px; float: left;"
                            @click="verification($event)"><span v-if="!disabled">获取验证码</span><span
                        v-else>{{time}}</span></van-button>
                <van-field v-model="password" type="password" left-icon="bag-o" placeholder="请输入密码"/>
                <van-field v-model="password2" type="password" left-icon="bag-o" placeholder="请再次输入密码"/>
                <van-button type="info" style="width: 80%;margin-top: 30px; border-radius: 30px" @click="resigered">注册
                </van-button>
            </van-tab>
        </van-tabs>
        <div class="footer">
            <span @click="login">去登录</span> | <span @click="forget">忘记密码</span>
        </div>
    </div>
</template>

<script>
    import {getvcode} from "../api/api";
    import {getresiger} from "../api/api";

    export default {
        name: "registered",
        data() {
            return {
                activeName: "",
                loginName: "",
                userName: "",
                phonenumber: "",
                code: "",
                password: "",
                password2: "",
                disabled: false,
                time: 60,
            }
        },
        methods: {
            verification(e) {
                getvcode(this.phonenumber).then(res => {
                    // console.log(res);
                    if(res.code==0){
                        e.target.disabled = true;
                        this.disabled = true;

                        clearInterval(time);
                        let time = setInterval(()=>{
                            if(this.time>0){
                                this.time--;

                            }else {
                                this.time = 60;
                                e.target.disabled = false;
                                this.disabled = false;
                                clearInterval(time);
                            }
                        },1000)
                    }else {
                        this.$toast(res.msg);
                    }
                })

            },

        resigered()
    {
        if (this.loginName == "" && this.code == "" && this.password == "" && this.password2 == "" && this.userName == "") {
            this.$toast("存在没有写的内容")
            // console.log("错误")
        } else if (this.password != this.password2) {
            this.$toast('两次密码不同');
        } else {
            getresiger(this.loginName, this.code, this.phonenumber, this.password, this.userName).then(res => {
                // console.log(res);
                this.$toast(res.msg);
                if(res.code == 0){
                    this.$router.push("/login")
                }
            })
        }

    },
            login(){
                this.$router.push('/login');
            },
            forget(){
                this.$router.push('/login/forget');
            }
    },
    }
</script>

<style lang="less" scoped>
    .footer {
        margin-top: 15%;
        text-align: center;
        font-size: 14px;
        span {
            margin: 0 20px;
        }

        span:hover {
            color: #409EFF;
        }
    }

    /deep/ .van-icon-phone-o::before {
        font-size: 20px;
    }

    /deep/ .van-icon-comment-o::before {
        font-size: 20px;
    }
</style>